- Page 2 -

The Photoshop Guru's Handbook - "Creating the NUI"
Part 3 - 2D & 3D (inDepth Interface project)

Creating Inset Lines:
Creating Inset Lines

These are THE easiest things to make. Here's how...

To create indented/inset lines, or separaters for an interface, all you need are some lines crossing over the areas where you'd like the separations to be. And you can have as many as you want. This is easiest done using the Line tool.

This image shows where i put my indented lines, or cut-outs, across my interface.
Inset Lines Example

Begin:
- Start by creating a New layer at the top of the layers palette. Name it 'Inset-Lines'.
- Pick the Line tool and change your foreground colour to white.
- In the options palette for the line tool, set the pixel width that you'd like your inset to be. I used 3 pixels. If you're making a straight line, turn OFF the 'anti-alias' check box. If you're drawing an angled line, then be sure the 'anti-alias' box is checked ON.
- Draw a your line across the area(s) where you want the indented line to be. If you start or end you line 'outside' the edges of the interface, just load the selection from the interface layer and invert the selection (Ctrl+Shift+I), then hit Delete.
- Now go to the Filter menu and choose the Emboss filter (Filter/Stylize/Emboss). Set the light Angle to 135, the Height to 3, and the Amount to 150. Click OK to apply.
- Now apply Auto Levels to the lines by pressing Shift+Ctrl+L.
- Open the Brightness & Contrast filter (under the Image/Adjust menu). Put the Brightness down to -50, and the Contrast up to +25. Click OK.
- You then have a few choices as to what Blend mode you want to use. Each of the following gives a slightly different look to the inset lines:

Normal - lines look dark grey and have strong highlight and shadow effect.
Hardlight - lines look very dark and appear 'cut in' deeper to the interface body. (This is the one i used in the sample picture)
Softlight - lines appear very light or subtle, and not cut in to the interface very deep.
Overlay - similar to Hardlight except the highlight and shadow aren't as bold. This mode will take-on the highlights and shading attributes that are on the interface body.
Experiment with the other modes to see what effect they have.
There's also another Blend mode that can give a subtle, but neat effect - Difference mode. I chose this mode for the sample image above. The effect though won't be obvious until we do this next group of steps.

Ok that's your basic inset lines right there. Pretty simple huh?

But wait! There's more!
If you would like to use a larger shape and make it look inset in to the interface body, then just create the shape, and do all of the above steps the same way. Your shape, whether it be a circle, square, text, etc, will appear inset to the interface. The only difference with insetting larger shapes is that you might need to use a higher 'Height' setting in the Emboss filter. Try between 5 & 7, instead of 3. Another thing you can do for larger shapes is to Gaussian blur the shape by .5 pixels just before you apply the Emboss filter to it. That will help smooth the edges and produce a nicer effect. The Blend modes that work best for larger shapes are Softlight and Overlay.

How about making the lines appear more 'molded' in to the interface, instead of cut-out from it? Sure! Take a look at this example image to see what i mean.
Inset Lines - molded effect
Subtle? Yes, but nice and clean.

Ok... to create that soft indent type of effect we'll need to Duplicate the Inset-Lines layer, and move the duplicate BELOW the Inset-Lines layer. Name this layer 'Inset-shadow'. Do that now.
- Change you foreground colour to black. Now fill the lines on this layer with black, by pressing Alt+Shift+Delete.
(see the bottom of this page for a 'GURU SUPER TIP' that explains this quick-key combination)
- Load the selection now for the Nav-Body layer. That's the largest shape in this interface. Just Ctrl+click on the Nav-Body layer and that will select it's contents.
- Go back to the Inset-Shadow layer now and apply a 1.5 pixel Gaussian Blur to the black lines. You can leave the blend mode of this layer on Normal. Then Deselect. (Ctrl+D)
- Duplicate this layer and name it 'Inset-highlight'. Now press Ctrl+i and the black lines will become inverted to white. Leave the blend mode of this layer on Normal also.
- Click on the Inset-shadow layer and pick the Move tool. Hit your left arrow key 2x to move the layer 2 pixels left. Then click on the Inset-highlight layer and hit your right arrow key 2x to move that layer 2 pixels right.
VOILA! This is where changed my 'Inset-lines' layer to Difference Blend mode. And to bring strengthen the effect a little more, i nudged my Inset-highlight layer back toward the left by 1 pixel. This is the image you see at the head of the page. It's a very subtle effect, but not so subtle as to go un-noticed.

And still another 'groovy' look...
You can also get another effect by reversing the shadow and highlight layers. It looks kind of like a 'groove' or deep cut-out effect. Have a look at this sample.
Inset Lines - groove effect

To create this effect, just use the Move tool and nudge those two layers over by 3 pixels each. So move the Highlight layer 3 to the left, and the Shadow layer 3 to the right. We're just reversing them.
If you also choose to stay with this grooved effect, then try playing around with the Blend mode for the Inset-Lines layer. You'll notice the look of the inset will change now when different blend modes are used for that layer. The change will be very subtle. But it's these very subtle characteristics that will produce the most realistic effects.

GURU ADVICE:
Take a look around you folks. Everything you see in the real world has so many teeny tiny subtle characteristics that you would need binoculars to see most of them. But to your naked eye, the ombient light around these objects are what give them their true shape and form. It's what produces your 'depth of field' perspective on 3 dimensional objects. So, the more subtle characteristics you give to your 3D creations, the more realistic they will look to the human eye. As an example, remember when 3D graphics first came to the movies? Eeewww... they were horrid and very UNrealistic looking. And that's only because the software being used at the time wasn't capable of adding the millions of subtlies to the 3D objects in the movies, to make them believable to the human eye; not without thousands of hours of tedious work. But nowadays 3D graphics have become so advanced that it's often hard to tell what's real and what's not onscreen. Take the movie Matrix, or Jurasic Park for example.
So simply put... if you can't afford to put the most effort into your 3D effects, you can't expect them to come out as good as they could be. And that goes double for using 'quick-filters' for 3D effects.

GURU SUPER TIP!: fastest fill in the west!
Using the key combination of Alt+Shift+Delete can save you tons of time.
Alt+Delete fills the active layer or selection with the foreground colour, adding the Shift key turns on the layer's 'preserve transparency' option temporarily while you do your fill. Will Photoshop wonders never cease! ;?)
Back up to 'molded line' section above.



3D Shapes / Inset Lines / View Screens
Buttons / Texture Mapping / Adding Text

> To the Top <
> Back to "2D & 3D" <


- Page 2 -

"The Photoshop Guru's Handbook"  and all contents of this site
are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved.